.skeleton {
    position: relative;
    overflow: hidden;
    
    &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.1) 20%,
            rgba(255, 255, 255, 0.2) 60%,
            rgba(255, 255, 255, 0)
        );
        animation: shimmer 2s infinite;
        content: '';
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

// 暗色模式下的动画效果
@media (prefers-color-scheme: dark) {
    .skeleton::after {
        background-image: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0.1) 20%,
            rgba(0, 0, 0, 0.2) 60%,
            rgba(0, 0, 0, 0)
        );
    }
} 